<div [@routerTransition]>
    <div class="m-subheader ">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>任务进展</span>
                </h3>
                <span class="m-section__sub">
                    导管加工情况
                </span>
            </div>           
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <div class="m-form m-form--label-align-right">
                    <form class="horizontal-form" (ngSubmit)="getReport()">
                        <div class="row align-items-center m--margin-bottom-10">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="FilterPicNo" class="control-label">外部任务号</label>
                                    <input id="FilterPicNo" type="text" name="FilterPicNo" class="form-control"
                                        [(ngModel)]="filterTask">
                                </div>
                            </div>     
                            <div *ngIf="advancedFiltersAreShown" class="row  align-items-center m--margin-4">
                           
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="FilterPart" class="control-label">任务状态</label>
                                            <select #sourceNameCombobox2
                                                    name="sourceName"
                                                    class="form-control bs-select"
                                                    [(ngModel)]="filterOrderState">
                                                <option value="" selected="true">所有状态</option>
                                                <option *ngFor="let state of orderState" [value]="state.value" >{{state.displayText}}</option>
                                            </select>                                    
                                        </div>                                
                                    </div>
                                    <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="sourceName323" class="control-label">执行状态</label>
                                                <select #sourceNameCombobox
                                                    name="sourceName323"
                                                    class="form-control bs-select"
                                                    [(ngModel)]="filterOrderProcessionState">
                                                    <option value="" selected="true">所有状态</option>
                                                <option *ngFor="let processionState of orderProcessionState" [value]="processionState.value" >{{processionState.displayText}}</option>
                                            </select>      
                                            </div>
                                     </div>
                                     <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="TeamGroupName" class="control-label">制造单位</label>
                                            <select #sourceNameCombobox1
                                                name="sourceName2"
                                                class="form-control bs-select"
                                                [(ngModel)]="filterCompany">
                                                <option value="" selected="true">所有单位</option>
                                                <option *ngFor="let company of companies" [value]="company.code" >{{company.displayName}}</option>
                                            </select>      
                                        </div>
                                    </div>  
                                    <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="TeamGroupName" class="control-label">交付时间早于</label>
                                                <input type="text"
                                                    placeholder="Datepicker"
                                                    name="da"
                                                    class="form-control"
                                                    [(ngModel)]="filterDeliveryDate"
                                                    bsDatepicker>
                                            </div>
                                        </div>                            
                                </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                        <button (click)="getReport()" class="btn btn-primary"><i class="flaticon-refresh
                                            "></i> 刷新</button>
                                </div>
                         </div>                     
                        </div>
                       
                        <div class="row m--margin-bottom-10">
                            <div class="col-sm-6">
                                <span class="clickable-item text-muted" *ngIf="!advancedFiltersAreShown"
                                    (click)="advancedFiltersAreShown=!advancedFiltersAreShown"><i
                                        class="fa fa-angle-down"></i> 显示更多</span>
                                <span class="clickable-item text-muted" *ngIf="advancedFiltersAreShown"
                                    (click)="advancedFiltersAreShown=!advancedFiltersAreShown"><i
                                        class="fa fa-angle-up"></i> 收起</span>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="row align-items-center">
                    <!--<Primeng-TurboTable-Start>-->
                    <div class="primeng-datatable-container" [busyIf]="primengTableHelperNormalReport.isLoading">
                        <p-table #dataTableNormalProductions 
                            [value]="primengTableHelperNormalReport.records" (onLazyLoad)="getReport($event)"
                            rows="{{primengTableHelperNormalReport.defaultRecordsCountPerPage}}"
                            [paginator]="false" [lazy]="true" scrollable="true" ScrollWidth="100%"
                            responsive="primengTableHelperNormalReport.isResponsive"
                            resizableColumns="primengTableHelperNormalReport.resizableColumns">
                            <ng-template pTemplate="header">
                                <tr>
                                    <th pSortableColumn="taskCodeForOutside">
                                        任务号
                                        <p-sortIcon field="taskCodeForOutside"></p-sortIcon>
                                    </th>
                                    <th pSortableColumn="state">
                                        任务状态
                                        <p-sortIcon field="state"></p-sortIcon>
                                    </th>
                                    <th pSortableColumn="processionState">
                                        执行状态
                                        <p-sortIcon field="processionState"></p-sortIcon>
                                    </th>
                                    <th >
                                            数量    

                                        </th>
                                    <th pSortableColumn="deliveryTime">
                                        交付日期    
                                        <p-sortIcon field="deliveryTime"></p-sortIcon>                                
                                    </th>
                                    <th pSortableColumn="companyCode">
                                        加工单位           <p-sortIcon field="companyCode"></p-sortIcon>                              
                                    </th>       
                                    <th >
                                            当前位置                                    
                                        </th>                   
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-record="$implicit">
                                <tr>
                                    <td>
                                        <span class="ui-column-title">任务号</span>
                                        {{ record.taskCodeForOutside}}
                                    </td>
                                    <td>
                                        <span class="ui-column-title">任务状态</span>
                                        <span class="m-badge m-badge--success m-badge--wide" *ngIf="record.stateString == '正常'"> 
                                            {{ record.stateString}}
                                        </span>
                                        <span class="m-badge m-badge--warning m-badge--wide" *ngIf="record.stateString == '暂停'"> 
                                            {{ record.stateString}}
                                        </span>
                                        <span class="m-badge m-badge--info  m-badge--wide" *ngIf="record.stateString == '作废'"> 
                                            {{ record.stateString}}
                                        </span>
                                        <span class="m-badge m-badge--danger   m-badge--wide" *ngIf="record.stateString == '报废'"> 
                                            {{ record.stateString}}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="ui-column-title">执行状态</span>
                                            {{ record.processionStateString}}
                                    </td>
                                    <td>
                                            <span class="ui-column-title">数量</span>
                                            {{ record.quantity}}
                                        </td>
                                        <td>
                                                <span class="ui-column-title">交付日期</span>
                                                {{ record.deliveryTime  | date:'shortDate'  }}
                                            </td>
                                    <td>
                                        <span class="ui-column-title">加工单位</span>
                                        {{ record.companyCodeString}}
                                    </td>
                                    <td>
                                            <span class="ui-column-title">当前位置</span>
                                            {{ record.currentProcession.processLocation}}
                                        </td>                       
                                </tr>
                            </ng-template>
                        </p-table>
                        <div class="primeng-no-data" *ngIf="primengTableHelperNormalReport.totalRecordsCount == 0">
                            没有数据
                        </div>
                        <div class="primeng-paging-container">
                            <p-paginator [rows]="primengTableHelperNormalReport.defaultRecordsCountPerPage"
                                #paginatorNormal (onPageChange)="getReport($event)"
                                [totalRecords]="primengTableHelperNormalReport.totalRecordsCount"
                                [rowsPerPageOptions]="primengTableHelperNormalReport.predefinedRecordsCountPerPage">
                            </p-paginator>
                            <span class="total-records-count">
                                共 {{primengTableHelperNormalReport.totalRecordsCount}} 条
                            </span>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>